<template>
	<view >
		<hx-navbar  :border="false"  transparent="hidden" height="140rpx" color="#fff">
		</hx-navbar>
		<view>
			<image class="topBg" src="/static/me/invitefriends/topbg.png" mode="widthFix"></image>
			<view class="rule"><text>规</text><text>则</text></view>
			<view class="invitebox">
				<view class="imageBox">
					<image style="width: 70%;" src="/static/me/invitefriends/invite.png" mode="widthFix" @click="inviteFriends"></image>
					<image style="width: 22%;margin-top: 30rpx;"  src="/static//me/invitefriends/poster.png" mode="widthFix" @click="sharePoster"></image>
				</view>
				<image class="hand" src="/static/me/invitefriends/hand.png" mode="widthFix"></image>
				<u-toast ref="uToast"></u-toast>
			</view>
			<view class="container">
				<view class="common">
					<view class="goldBg">
						<image src="/static/me/invitefriends/goldBg.png" mode="widthFix"></image>
						<text>奖励攻略</text>
					</view>
					<view class="flow">
						<image style="width: 90%;" src="/static/me/invitefriends/flow.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="common">
					<view class="goldBg">
						<image src="/static/me/invitefriends/goldBg.png" mode="widthFix"></image>
						<text>我的成就</text>
					</view>
					<view style="display: flex;flex-direction: row;width: 100%;margin-top: 40rpx;">
						<view class="flex_col boxcommon">
							<text class="t1">成功邀请(人)</text>
							<text class="t2">0</text>
						</view>
						<view class="flex_col boxcommon">
							<text class="t1">饭票(元)</text>
							<text class="t2">0</text>
						</view>
						<view class="flex_col boxcommon">
							<view class="t1">已兑换券(元)<u-icon name="arrow-right" color="#845a33" size="20rpx"></u-icon></view>
							<text class="t2">0</text>
						</view>
					</view>
					<view class="btn">去兑换</view>
					<view class="redbag">
						<view><text>饭票可1：1兑换以下面值优惠券</text><text class="tit">（优先兑换饭票余额内最高面值的优惠券)</text></view>
						<view style="width: 100%;display: flex;flex-direction: row;margin-top: 20rpx;">
							<view v-for="(item,i) in bags" :key="item.i" class="itemLi">
								<image src="/static/me/invitefriends/redbag.png" mode="widthFix"></image>
								<text>¥{{item.num}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="common" >
					<view class="goldBg">
						<image src="/static/me/invitefriends/goldBg.png" mode="widthFix"></image>
						<text>邀请记录</text>
					</view>
					<block v-if="user.length === 0">	
						<view class="off">暂无邀请记录</view>
						<view class="line"></view>
					</block>
					<view class="on" v-else>
						<view class="avatarbox">
						<block v-for="(item,i) in user" :key="item.i">
							<view class="flex_col" style="width: 25%;">
								<view class="avatar"><image :src="item.src" mode="widthFix" style="width:80%;border-radius: 50%;"></image></view>
								<view class="name">{{item.name}}</view>
							</view>
						</block>
						</view>
						<view class="barbox">
							<view class="lineBar"><view>还差<text>{{4 - user.length}}</text>人</view></view>
							<view class="inviteBtn">去邀请</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				bags:[
					{num:2},
					{num:3},
					{num:5},
					{num:10},
					{num:20}
				],
				user:[
					{name:'张三',src:'/static/me/invitefriends/default.jpg'},
					{name:'张三',src:'/static/me/invitefriends/default.jpg'},
					{name:'张三',src:'/static/me/invitefriends/default.jpg'},
					{name:'张三',src:'/static/me/invitefriends/default.jpg'},
				]
			}
		},
		methods:{
			//立即邀请好友
			inviteFriends(){
				this.$refs.uToast.show({
					type: 'error',
					title:'暂未开放'
				})
			},
			//分享海报
			sharePoster(){
				this.$refs.uToast.show({
					type: 'error',
					title:'暂未开放'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FC9A8D ;
	}
	
	.topBg{
		position: absolute;
		width: 100%;
		top: 0;
	}
	.rule{
		position: absolute;
		top: 140rpx;
		right: 0;
		background: linear-gradient(180deg, #6BB5FF 0%, #3E9FFF 100%);
		box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.15);
		border-radius: 28rpx 0px 0px 28rpx;
		width: 50rpx;
		height: 110rpx;
		font-size: 24rpx;
		color: #F0F0F0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.invitebox{
		position: absolute;
		top: 1020rpx;
		width: 100%;
		.imageBox{
			width: 100%;
			// height: 100rpx;
			// padding:0 100rpx;
			// background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.hand{
			position: absolute;
			width: 14%;
			top: 32%;
			right: 16%;
		}
	}
	.container{
		width: 100%;
		position: absolute;
		top: 1260rpx;
		padding: 0 36rpx;
		height: 100rpx;
		// background-color: #fff;
		
		.common{
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 24rpx;
			padding: 0 24rpx;
			
			.goldBg{
				position: relative;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					width: 60%;
				}
				text{
					position: absolute;
					top: 12rpx;
					font-size: 30rpx;
					font-weight: 700;
					color: #A85910;
				}
			}
		}
		.flow{
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 40rpx 0;
		}
		.flex_col{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		.boxcommon{
			font-weight: 700;
			flex: 1;
			.t1{
				font-size: 24rpx;
				color: #845a33;
			}
			.t2{	
				margin-top: 16rpx;
				font-size: 68rpx;
				background: linear-gradient(105.74deg, #F45B5B 39%, #FFD976 135.61%, #FFE49E 135.61%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}
		}
		.btn{
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			font-size: 26rpx;
			color: #c7b289;
			background: #FDEFAC;
			border-radius: 60px;
			margin-top: 20rpx;
			font-weight: 700;
		}
		.redbag{
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			font-size: 26rpx;
			color: #845a33;
			font-weight: 700;
			width: 100%;
			.tit{
				font-size: 21rpx;
			}
			.itemLi{
				position: relative;
				width: 20%;
				display: flex;
				justify-content: center;
				// align-items: center;
				text{
					position: absolute;
					top: 30rpx;
					color: #FF8F51;
					font-size: 30rpx;
					font-weight: 700;
					z-index: 9;
				}
			}
		}
		.off{
			width: 100%;
			text-align: center;
			color: #b5b5b5;
			font-size: 24rpx;
			height: 80rpx;
			line-height: 80rpx;
			// border-bottom: 0.8rpx solid #d9d9d9;
		}
		.line{
			width: 90%;
			height: 0.8rpx;
			background-color: #d9d9d9;
			margin-bottom: 40rpx;
		}
		.on{
			width: 80%;
			margin: 40rpx 0;
			.avatarbox{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.avatar{
					
					width: 100%;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.name{
					font-size: 24rpx;
					color: #3d3d3d;
				}
			}
			.barbox{
				margin-top: 20rpx;
				width: 100%;
				height: 48rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.lineBar{
					width: 70%;
					background-color: #FDEFAC;
					border-radius: 10rpx;
					overflow: hidden;
					height: 40rpx;
					view{
						position: relative;
						width: 36%;
						height: 100%;
						text-align: center;
						line-height: 40rpx;
						font-size: 24rpx;
						color: #fff;
						float: right;
						background: #FC9A8D;
						&::after{
							content: ' ';
							  position: absolute;
							  top: -50rpx;
							  left: -21rpx;
							  border-width: 50px 20rpx;
							  border-style: solid;
							  border-color:transparent transparent  #FC9A8D transparent;
						}
						text{
							color: #FFECA8;
							font-size: 32rpx;
							font-weight: 700;
						}
					}
				}
				.inviteBtn{
					width: 25%;
					font-size: 24rpx;
					font-weight: 700;
					text-align: center;
					line-height: 48rpx;
					color: #fff;
					background: linear-gradient(142.24deg, #F45B5B 21.82%, #FFD976 103.58%, #FFE49E 103.58%);
					box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.15), inset 0px 6rpx 6rpx rgba(123, 23, 23, 0.25);
					border-radius: 26rpx;
				}
			}
		}
	}
</style>